<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
        <div class="itemImg">
         <img :src="item.image" alt="">
        </div>
        <div class="itemInfo">
          <p>{{item.title}}</p>
          <p style="color:red">￥{{item.price}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import request from '@/utlis/request.js'
import { onMounted,ref } from 'vue'
const list=ref([])
onMounted(() => {
 request.get('/list',{
    params: {
        pagination:1,
        pageNum:20
    }
 }).then((res) => {
    if(res.data.code==200)
    {
        list.value=res.data.data
    }
 })
})
</script>
<style lang='scss' scoped>
ul{
    column-count: 2;
    column-gap: 10px;
    li{
        break-inside: avoid;
        .itemImg{
            img{
                width: 100%;
            }
        }
        .itemInfo{
            padding: 2px 8px;
        }
    }
}
</style>